<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>">
    <link  href="../../hos_manage/images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../../css/palace/address/address_search.css?a=<%=Math.random()%>">
    <script src="/js/jquery-1.9.1.min.js"></script>
</head>
<body id="app" v-cloak>
<%@ include file="../../header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="../../left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <!--右边导航下面内容-->
        <div class="address-book">
            <div class="title">
                <div class="show-block note">
                    <span class="hover" @click="homePage()">首页</span>
                    <span class="left-distance">></span>
                    <span class="left-distance hover" @click="addressBook()">通讯录列表</span>
                    <span class="left-distance">></span>
                    <span class="left-distance">搜索结果</span>
                </div>
                <div class="search-input-button">
                    <div class="title-right">
                        <input class="show-block" type="text" placeholder="按工号/姓名/科室" @input="searchBlur($event)" @focus="showSearch()"
                               @blur="hideSearch()">
                        <img class="show-block" src="../../images/palace/address/search1.png">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="position">
                    <div class="show-block address-book-right">
                        <div class="all-operate create">
                            <div class="show-block" style="color: #969696">搜索:</div>
                            <div class="show-block address-left" @click="changeTag(0)">
                                <div class="person-depart-tag" :class="{'blue-bottom': tag == 0}">人员</div>
                            </div>
                            <div class="show-block address-left" @click="changeTag(1)">
                                <div class="person-depart-tag" :class="{'blue-bottom': tag == 1}">部门</div>
                            </div>
                            <div class="show-block address-left" @click="changeTag(2)">
                                <div class="person-depart-tag" :class="{'blue-bottom': tag == 2}">标签</div>
                            </div>
                        </div>
                        <div class="data-form show-margin-left line" v-show="tag == 0">
                            <div class="form-title">
                                <div class="show-block title-width">工号</div>
                                <div class="show-block title-width">姓名</div>
                                <div class="show-block title-width">电话</div>
                                <div class="show-block title-width">部门</div>
                                <div class="show-block title-width">职称</div>
                                <div class="show-block title-width">职位</div>
                                <div class="show-block title-width">app状态</div>
                            </div>
                            <div class="form-title bg-white line" @click="showDetailInfo(i)" v-for="i in user">
                                <div class="show-block title-width" v-html="i.employee_id"></div>
                                <div class="show-block title-width" v-html="i.name"></div>
                                <div class="show-block title-width" v-html="i.phone"></div>
                                <div class="show-block title-width" v-html="i.dept[0].deptPath"></div>
                                <div class="show-block title-width" v-html="getBasicCategory(i, '职称')"></div>
                                <div class="show-block title-width" v-html="getBasicCategory(i, '职位')"></div>
                                <div class="show-block title-width" v-html="logined(i)"></div>
                            </div>
                        </div>
                        <div class="data-form show-margin-left line" v-show="tag == 1">
                            <div class="form-title">
                                <div class="show-block depart-title-width">名称</div>
                                <div class="show-block depart-title-width">路径</div>
                                <div class="show-block depart-title-width">ID</div>
                            </div>
                            <div class="form-title bg-white line" @click="showDeptDetailInfo(i)" v-for="i in dept">
                                <div class="show-block depart-title-width" v-html="i.deptName"></div>
                                <div class="show-block depart-title-width" v-html="i.deptPath"></div>
                                <div class="show-block depart-title-width" v-html="i.id"></div>
                            </div>
                        </div>
                        <div class="data-form show-margin-left line" v-show="tag == 2">
                            <div class="form-title">
                                <div class="show-block tag-title-width-left">名称</div>
                                <div class="show-block tag-title-width-right">备注</div>
                            </div>
                            <div class="form-title bg-white line" v-for="i in label" @click="showLabelDetailInfo(i)">
                                <div class="show-block tag-title-width-left" v-html="i.name"></div>
                                <div class="show-block tag-title-width-right" v-html="i.alias"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-detail" v-show="infoDetail">
                    <div class="detail-title">
                        <div class="show-block">详细信息</div>
                        <img class="show-block detail-img" src="../../images/palace/address/xx.png" @click="hideDetailInfo()">
                    </div>
                    <div class="detail-avatar">
                        <img class="show-block left-img" src="../../images/palace/address/login.png">
                        <div class="show-block info-middle">
                            <div class="name" v-html="nowPerson.name"></div>
                            <div class="phone" v-html="nowPerson.phone"></div>
                        </div>
                        <%--<img class="show-block right-img" src="../../images/palace/address/eye.png">--%>
                    </div>
                    <div class="piece">
                        <div class="light-black infor show-block">工号</div>
                        <div class="light-grey infor show-block" v-html="nowPerson.employee_id"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">微信</div>
                        <div class="light-grey infor show-block" v-html="nowPerson.wechat"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">QQ</div>
                        <div class="light-grey infor show-block" v-html="nowPerson.qq"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">邮箱</div>
                        <div class="light-grey infor show-block" v-html="nowPerson.email"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">身份证</div>
                        <div class="light-grey infor show-block" v-html="nowPerson.card_number"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">部门</div>
                        <div class="light-grey infor show-block" v-html="nowPerson.dept[0].deptPath"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">职称</div>
                        <div class="light-grey infor show-block" v-html="getBasicCategory(nowPerson, '职称')"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">职位</div>
                        <div class="light-grey infor show-block" v-html="getBasicCategory(nowPerson, '职位')"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">标签</div>
                        <div class="light-grey infor show-block">
                            <div class="show-block tag" v-for="tag in nowPerson.extend" v-html="tag.label_name"></div>
                        </div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">app</div>
                        <div class="light-grey infor show-block" v-html="logined(nowPerson)"></div>
                    </div>
                </div>
                <div class="depart-info-detail" v-show="deptInfoDetail">
                    <div class="detail-title">
                        <div class="show-block">详细信息</div>
                        <img class="show-block detail-img" src="../../images/palace/address/xx.png" @click="hideDeptInfo()">
                    </div>
                    <div>
                        <img class="show-block depart-left-img" src="../../images/palace/address/ic-department.png">
                        <div class="show-block info-middle">
                            <div class="depart-name" v-html="nowDept.deptName"></div>
                        </div>
                    </div>
                    <div class="piece">
                        <div class="light-black infor show-block">路径</div>
                        <div class="light-grey infor show-block" v-html="nowDept.deptPath"></div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">部门</div>
                        <div class="light-grey infor show-block" v-html="nowDept.deptNum">1</div>
                    </div>
                    <div class="one-piece">
                        <div class="light-black infor show-block">成员</div>
                        <div class="light-grey infor show-block" v-html="nowDept.userNum"></div>
                    </div>
                </div>
                <div class="tag-info-detail" v-show="labelInfoDetail">
                    <div class="detail-title">
                        <div class="show-block">详细信息</div>
                        <img class="show-block detail-img" src="../../images/palace/address/xx.png" @click="hideLabelInfo()">
                    </div>
                    <div>
                        <img class="show-block depart-left-img" src="../../images/palace/address/ic-label4.png">
                        <div class="show-block info-middle">
                            <div class="depart-name" v-html="nowLabel.name"></div>
                        </div>
                    </div>
                    <div class="piece">
                        <div class="tag-light-black infor show-block">建立时间</div>
                        <div class="tag-light-grey infor show-block" v-html="forMateTime(nowLabel.create_time)"></div>
                    </div>
                    <div class="one-piece">
                        <div class="tag-light-black infor show-block">部门</div>
                        <div class="tag-light-grey infor show-block" v-html="compareDeptNum(nowLabel.num, 1)">无</div>
                    </div>
                    <div class="one-piece">
                        <div class="tag-light-black infor show-block">成员</div>
                        <div class="tag-light-grey infor show-block" v-html="compareDeptNum(nowLabel.num, 2)">10</div>
                    </div>
                    <div class="one-piece">
                        <div class="tag-light-black infor show-block">ID</div>
                        <div class="tag-light-grey infor show-block" v-html="nowLabel.id"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var HOSPITAL = "{user.hospital}";
    new Vue({
        el: "#app",
        data: {
            labelInfoDetail: false,
            infoDetail: false,
            deptInfoDetail: false,
            tag: 0,
            user: [],
            dept: [],
            label: [],
            nowPerson: {},
            nowDept: {},
            nowLabel: {},
        },
        methods: {
            compareDeptNum: function(i, num) {
                var list = i.filter(function(item) {
                    return item.type == num;
                });
                if (list.length > 0) {
                    return list[0].num;
                }
                return "无";
            },
            addressBook: function () {
                locationHerf("address_book");
            },
            homePage: function () {
                location.href = "../../index.jsp";
            },
            // 转化时间戳
            forMateTime: function(time) {
                var date = new Date(time);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                return year + "-" + month + "-" + day;
            },
            showSearch: function() {
                this.searchInputShow = true;
            },
            hideSearch: function() {
                var _this = this;
                setTimeout(function() {
                    _this.searchInputShow = false;
                }, 200)

            },
            // 所有的弹框消失
            missDetail: function() {
                this.infoDetail = false;
                this.labelInfoDetail = false;
                this.deptInfoDetail = false;
            },
            // 改变标签
            changeTag: function(i) {
                if (this.tag != i) {
                    this.tag = i;
                    this.missDetail();
                }
            },
            // 获取职称、职位等
            getBasicCategory: function(i, name) {
                return i.basic.filter(function(item) {
                    return item.category_name == name;
                }).map(function(item) {
                    return item.label_name;
                }).join("-");
            },
            // 判断是否开通
            logined: function(i) {
                return i.last_ip && "已开通" || "未开通";
            },
            hideDetailInfo: function() {
                this.infoDetail = false;
            },
            hideDeptInfo: function () {
                this.deptInfoDetail = false;
            },
            hideLabelInfo: function () {
                this.labelInfoDetail = false;
            },
            // 模糊搜索
            searchBlur: function(event) {
                var value = event.target.value.trim();
                clearTimeout(this.timeout);
                var _this = this;
                this.timeout = setTimeout(function() {
                    if (value == "") {
                        return;
                    }
                    $.ajax({
                        type: 'POST',
                        url: location.href,
                        data: {
                            act: "fuzzySearch",
                            hospital: HOSPITAL,
                            key: value,
                        },
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                _this.user = res.data.user;
                                _this.label = res.data.label;
                                _this.dept = res.data.dept;
                                _this.adjustTag();
                                _this.missDetail();
                            } else {
                                _this.danger(res.errmsg);
                            }
                        },
                    });
                }, 700);
            },
            // 展现用户的详细信息
            showDetailInfo: function(i) {
                this.infoDetail = true;
                this.nowPerson = i;
            },
            showDeptDetailInfo: function(i) {
                this.deptInfoDetail = true;
                this.nowDept = i;
            },
            showLabelDetailInfo: function(i) {
                this.labelInfoDetail = true;
                this.nowLabel = i;
            },
            adjustTag: function() {
                if (this.user && this.user.length != 0) {
                    this.tag = 0;
                } else if (this.dept && this.dept.length != 0) {
                    this.tag = 1;
                } else if (this.label && this.label.length != 0) {
                    this.tag = 2;
                }
            }
        },
        ready: function() {
            var info = getHrefParms("address_search");
            if (info.tag) {
                this[info.tag] = info.info;
                switch (info.tag) {
                    case "user": this.tag = 0;break;
                    case "dept": this.tag = 1;break;
                    case "label": this.tag = 2;break;
                }
            } else {
                var _list = [];
                this.user = info.info.user;
                this.dept = info.info.dept;
                this.label = info.info.label;
                this.adjustTag();
            }
            console.log(info)
        }
    });

</script>
</html>
